<template>
  <section>
    <div style="margin:0 20px;">
      <el-form size="mini" label-width="100px;">
        <el-form-item label="实例标题：">
          <el-input v-model="addForm.title" style="width: 193px"></el-input>
        </el-form-item>
        <el-form-item label="选择问卷：">
          <el-select clearable v-model="selQuestion" :filterable="true" remote
                     :reserve-keyword="false" default-first-option  placeholder="请输入关键词"
                     :remote-method="getQuestionnaireList" size="mini">
            <el-option v-for="item of questionnaireList" :key="item.id" :label="item.title" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="可否重复：">
          <el-switch v-model="addForm.repeatable"></el-switch>
        </el-form-item>
        <el-form-item label="报告模板：">
          <el-switch v-model="addForm.needReportTemplate"></el-switch>
          <span style="margin-left: 20px" v-if="addForm.needReportTemplate">选择:
            <el-select clearable v-model="addForm.reportTemplateId" :filterable="true" remote
                       :reserve-keyword="false" default-first-option  placeholder="输入关键词"
                       :remote-method="remoteMethod" size="mini">
              <el-option v-for="reportTemplate in reportTemplateList" :key="reportTemplate.id" :label="reportTemplate.title" :value="reportTemplate.id">
              </el-option>
            </el-select>
          </span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </section>
</template>

<script>
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "newInstance",
    props:['addForm'],
    data(){
      return{
        questionnaireList:[],
        selQuestion:null,
        reportTemplateList:[]
      }
    },
    created(){
      this.selQuestion=this.addForm.qaId
    },
    computed: {
      ...mapGetters(['department']),
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      getQuestionnaireList(key) {
        if(key === '' || !key){//关键词为空或没有输入
          this.questionnaireList=[]
          return
        }
        this.fetch({name:"getQuestionnaireList",data:{key}})
          .then(res=>{
            console.log('搜索的问卷列表',res)
            this.questionnaireList=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      btnSubmit(){
        this.loading=true
        this.fetch({name:'createInstance',data:{...this.addForm,qaId:this.selQuestion}})
          .then(res=>{
            console.log('运行实例成功---------',res)
            if (res.errCode) {
              this.$message({ type: 'error', message: res.errMsg })
            } else {
              //重新加载列表
              this.$emit('cancel',this.selQuestion)
              // this.getInstanceById(this.selQuestion)
            }
          })
          .catch(err=>{
            console.log(err)
            this.$message({ type: 'error', message: "服务器错误" })
          })
          .finally(()=>{
            this.loading=false
            this.showAddDialog=false
          })
      },
      remoteMethod(keywords,pageNo) {
        this.searchKey=keywords
        if(keywords === '' || !keywords){//关键词为空或没有输入
          this.reportTemplateList=[]
          return
        }
        this.fetch({name:"getReportTemplateList",data:{keywords,departmentId:this.department.id}})
          .then(res=>{
            console.log('看下数量---------',res)
            this.reportTemplateList=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
